<template>
    <div class="main ad-position">
        <section>
            <el-table :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
                <el-table-column align="center" label="名称" prop="positionName"></el-table-column>
                <el-table-column align="center" label="类别">
                    <template slot-scope="scope">
                        <span v-text="types[scope.row.adType]"></span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="展示方式">
                    <template slot-scope="scope">
                        <span v-text="showTypes[scope.row.presentation]"></span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" v-if="rightsButtons['detail']">
                    <template slot-scope="scope">
                        <router-link :to="{name: 'adPositionDetail', params: {id: scope.row.id}, query: {name: scope.row.positionName}}">
                            <el-button type="primary" size="mini">查看</el-button>
                        </router-link>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="listQuery.pageIndex"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="listQuery.pageSize"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listTotal">
            </el-pagination>
        </section>
    </div>
</template>

<script>

    export default {
        name: 'adPosition',
        data() {
            return {
                // 类别
                types: {
                    1: '纯图',
                    2: '图文',
                    3: '文字',
                },
                // 展示方式
                showTypes: {
                    1: '单条',
                    2: '罗列',
                    3: '轮播',
                },
                list: [],
                listQuery: {
                    name: '',
                    pageIndex: 1,
                    pageSize: 20,
                    isPage: 1
                },
                listTotal: 0,
                listLoading: false
            }
        },
        created() {
            this.getList();
        },
        methods: {
            // 获取列表
            getList() {
                this.listLoading = true;
                this.request({
                    url: '/bsnl-ad/adposition/list',
                    method: 'get',
                    params: this.listQuery
                }).then(({data, totalCount}) => {
                    this.list = data;
                    this.listTotal = totalCount;
                    this.listLoading = false;
                }).catch(err => {
                    console.log(err);
                    this.list = [];
                    this.listTotal = 0;
                    this.listLoading = false;
                });
            },
            // 搜索
            search() {
                this.listQuery.pageIndex = 1;
                this.getList();
            },
            //切换每页条数
            handleSizeChange (value) {
                this.listQuery.pageSize = value;
                this.getList()
            },
            // 切换分页
            handleCurrentChange(page) {
                this.listQuery.pageIndex = page;
                this.getList();
            },
        }
    }
</script>

<style lang="scss">
    .ad-position>section{
        padding: 24px;
        background: #fff;
    }
</style>
